<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>汽车的家</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            img{
                width: 100%;
                height: 324px;
            }
            main{
                width:600px;
                height: 200px;
                padding:20px;
                border:5px solid #999999;
                margin:20px auto 0px;
            }
            ul li{
                width: 200px;
                line-height: 40px;
                text-align: center;
                float: left;
                cursor: pointer;
            }
            a{
                font-size: 14px;
                text-decoration: none;
                color:#2440b3;
            }
            .dd{
                background:black;
                color:red;
            }
            div{
                display: none;
            }
            .aa{
                display: block;
            }
        </style>
    </head>
    <body>
        <img src="kk.jpg" alt="">
        <main >
            <ul>
                <li class="dd">自驾游</li>
                <li >车主口碑</li>
                <li>降价信息</li>
            </ul>
            <section>
                <div class="aa">
                    <a href="https://you.autohome.com.cn/details/254134#pvareaid=3311360" target="_blank">发现最美北部湾，自驾南宁-防城港-北海六日游</a><br><br>
                    <a href="https://you.autohome.com.cn/details/253090#pvareaid=3311361" target="_blank"> 3天2晚仲夏自驾游，梦回到春秋：2700年常州淹城穿越之旅</a><br><br>
                </div>
                <div>
                    <a href="https://k.autohome.com.cn/detail/view_01f73c92gq6cv3cdhg6mtg0000.html#pvareaid=3311390l" target="_blank">爱运动，爱街舞，爱上凯迪拉克CT5</a><br><br>
                    <a href="https://k.autohome.com.cn/detail/view_01f6h1q1zr6cv3ad9h70r00000.html#pvareaid=3311390" target="_blank">奔驰E级，2021款改款E300L豪华型</a><br><br>
                </div>
                <div>
                    <a href="https://www.autohome.com.cn/dealer/202106/679241518.html#pvareaid=3311444" target="_blank">雷克萨斯NX欢迎垂询 购车让利促销中</a><br><br>
                    <a href="https://www.autohome.com.cn/dealer/202106/679500609.html#pvareaid=3311444" target="_blank">标致4008欢迎莅临赏鉴 直降2.4万</a><br><br>
                </div>
            </section>
 

            <script>
                var tags=document.getElementsByTagName('li');
                var boxs=document.getElementsByTagName('div');
                for(var i=0;i<tags.length;i++){
                    tags[i].index=i;
 

                    tags[i].onclick=function(){


                        for(var m=0;m<tags.length;m++){
                            tags[m].className='';
                            boxs[m].className='';
                        }

                        this.className='dd';
 
                        var n=this.index;
                        
                        boxs[n].className='aa'
                    }
                }
            </script>
        </main>
    </body>
</html>